<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">		 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scrolling Multiple Content Areas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "css/scroll-multi.css";
</style>
<script src="js/dw_scrollObj.js" type="text/javascript"></script>
<script src="js/dw_hoverscroll.js" type="text/javascript"></script>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_slidebar.js" type="text/javascript"></script>
<script src="js/dw_scroll_aux.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at www.dyn-web.com
  Copyright 2001-4 by Sharon Paine 
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

function initScrollLayers() {
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (table?)
  var wndo1 = new dw_scrollObj('wn1', 'lyr1', null);

  // arguments: dragBar id, track id, axis ("v" or "h"), x offset, y offset
  // (x/y offsets of dragBar in track)
  wndo1.setUpScrollbar("dragBar1", "track1", "v", 1, 1);
  
  var wndo2 = new dw_scrollObj('wn2', 'lyr2', 'imgTbl');
  wndo2.setUpScrollbar("dragBar2", "track2", "v", 1, 1);
  wndo2.setUpScrollbar("dragBar3", "track3", "h", 1, 1);
  
  // Read instructions if your scrolling layers are inside tables 
  
  // Scrollbars initially hidden in this example 
  dw_showLayers("scrollbar1", "scrollbar2", "scrollbar3");
}

function dw_showLayers() {
  if ( document.getElementById ) {
    var lyr, i;
    for (i=0; arguments[i]; i++) {
      lyr = document.getElementById( arguments[i] );
      lyr.style.visibility = "visible";
    }
  }
}
</script>
</head>
<body onload="initScrollLayers()">
<h1>Multiple Scroll Areas in a Document</h1>

<div id="holder1">
  <div id="wn1">
    <div id="lyr1" class="content">
      <h2>Information</h2>
      <p>You can add as many scrolling content areas as you like with this code. They can be positioned absolute or relative.</p>
      <p>Information about setting up the layers is contained in the <a href="scroll-rel.html">scrolling layers in a table</a> example.</p>
      <p>The scroll arrows can be activated onmouseover or onclick. The scrollbar feature is optional. You can set up the scrollbars using graphics of your choice.</p>
      <p>The <a href="http://www.dyn-web.com/dhtml/scroll/">main presentation page for scrolling layers</a> contains more detailed information about the scrollbars and how to set them up.</p>
    </div>
  </div>

  <div id="scrollbar1">
    <div id="up1"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn1','up')" onmouseout="dw_scrollObj.stopScroll('wn1')" onmousedown="dw_scrollObj.doubleSpeed('wn1')" onmouseup="dw_scrollObj.resetSpeed('wn1')"><img src="images/btn-up.gif" width="11" height="11" alt="" /></a></div>
    <div id="track1">
      <div id="dragBar1"></div>
    </div>
    <div id="down1"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn1','down')" onmouseout="dw_scrollObj.stopScroll('wn1')" onmousedown="dw_scrollObj.doubleSpeed('wn1')" onmouseup="dw_scrollObj.resetSpeed('wn1')"><img src="images/btn-dn.gif" width="11" height="11" alt="" /></a></div>
  </div>
  
</div><!-- end holder1 -->

<div id="holder2">
  <div id="wn2">
    <div id="lyr2" class="content">
      <table id="imgTbl" border="0" cellpadding="12" cellspacing="0">
       <tr>
        <td><img src="images/heron.gif" width="100" height="100" alt="" /></td>
        <td><img src="images/balloon.gif" width="106" height="131" alt="" /></td>
        <td><img src="images/wader.gif" width="100" height="100" alt="" /></td>
        <td><img src="images/smile.gif" width="88" height="88" alt="" /></td>
       </tr>
       <tr>
        <td><img src="images/wader.gif" width="100" height="100" alt="" /></td>
        <td><img src="images/grim.gif" width="88" height="88" alt="" /></td>
        <td><img src="images/eagle.gif" width="100" height="100" alt="" /></td>        
        <td><img src="images/bomb.gif" width="88" height="88" alt="" /></td>
       </tr>
       <tr>
        <td><img src="images/eagle.gif" width="100" height="100" alt="" /></td>
        <td><img src="images/frown.gif" width="88" height="88" alt="" /></td>
        <td><img src="images/balloon.gif" width="106" height="131" alt="" /></td>
        <td><img src="images/heron.gif" width="100" height="100" alt="" /></td>
       </tr>
       <tr>
        <td><img src="images/balloon.gif" width="106" height="131" alt="" /></td>
        <td><img src="images/heron.gif" width="100" height="100" alt="" /></td>
        <td><img src="images/wader.gif" width="100" height="100" alt="" /></td>
        <td><img src="images/eagle.gif" width="100" height="100" alt="" /></td>
       </tr>
      </table>
    </div>
  </div>

  <div id="scrollbar2">
    <div id="up2"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','up')" onmouseout="dw_scrollObj.stopScroll('wn2')" onmousedown="dw_scrollObj.doubleSpeed('wn2')" onmouseup="dw_scrollObj.resetSpeed('wn2')"><img src="images/btn-up.gif" width="11" height="11" alt="" /></a></div>
    <div id="track2">
      <div id="dragBar2"></div>
    </div>
    <div id="down2"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','down')" onmouseout="dw_scrollObj.stopScroll('wn2')" onmousedown="dw_scrollObj.doubleSpeed('wn2')" onmouseup="dw_scrollObj.resetSpeed('wn2')"><img src="images/btn-dn.gif" width="11" height="11" alt="" /></a></div>
  </div>
  
  <div id="scrollbar3">
    <div id="left3"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','left')" onmouseout="dw_scrollObj.stopScroll('wn2')" onmousedown="dw_scrollObj.doubleSpeed('wn2')" onmouseup="dw_scrollObj.resetSpeed('wn2')"><img src="images/btn-lft.gif" width="11" height="11" alt="" /></a></div>
    <div id="track3">
      <div id="dragBar3"></div>
    </div>
    <div id="right3"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn2','right')" onmouseout="dw_scrollObj.stopScroll('wn2')" onmousedown="dw_scrollObj.doubleSpeed('wn2')" onmouseup="dw_scrollObj.resetSpeed('wn2')"><img src="images/btn-rt.gif" width="11" height="11" alt="" /></a></div>
  </div>
  
</div>

<div id="footer"><a href="http://www.dyn-web.com">www.dyn-web.com</a></div>

</body>
</html>
